<template>
  <view class="product-box">
    <!-- productObj.checkQuantity 选中当前分数的数量 -->
    <view
      @click="$emit('checkProduct')"
      class="product"
      :class="{ active: !productObj.isDisabled && productObj.selectQuantity, enActive: productObj.isDisabled && productObj.selectQuantity }"
    >
      <image :src="productObj.image ? productObj.image : '/static/images/classify/imgs.png'" mode="aspectFill"></image>
      <view class="text" style="text-align: center">
        <view style="font-size: 22rpx; color: #111111">
          {{ productObj.foodName.length > 6 ? productObj.foodName.slice(0, 6) + '...' : productObj.foodName }}×{{ productObj.quantity }}
        </view>
      </view>
      <view class="action" v-if="productObj.selectQuantity">
        <view>
          <Action @add="$emit('MealAdd')" @minus="$emit('MealMinus')" :isDisabled="productObj.isDisabled" :number="productObj.selectQuantity" :materialsBtn="false"></Action>
        </view>
      </view>
    </view>

    <!-- 是否有做法 -->
    <view v-if="productObj.isCharge && productObj.otherData.length > 0" class="practice-box" @click="$emit('selectPractice')">选择做法</view>
  </view>
</template>

<!-- 
 isDisabled:表示固定选好不用自己选
 checkQuantity： 表示当前菜的选的数量
 -->

<script>
import Action from '@/pages/tab_bar/classify/components/actions/actions.vue';
export default {
  components: { Action },
  props: {
    productObj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      // isDisabled: true
    };
  }
  // mounted() {
  //   console.log(this.productObj);
  // }
};
</script>

<style lang="scss">
.product-box {
  position: relative;

  .product {
    box-shadow: 5rpx 5rpx 5rpx #c2c2c2;
    width: 200rpx;
    height: 320rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
    image {
      width: 196rpx;
      height: 196rpx;
      border-radius: 6rpx;
    }
    .action {
      margin-top: 10rpx;
      margin-left: 18rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .active {
    border: 2rpx solid #dba871;
  }
  .enActive {
    border: 2rpx solid #c2c2c2;
  }
  .practice-box {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 50%;
    line-height: 34rpx;
    text-align: center;
    background-color: #edac2f;
    color: #fff;
    border-radius: 17rpx;
    font-size: 23rpx;
  }
}
</style>
